<template>
  <v-date-picker
    :value="value"
    class="datepicker-detail"
    :first-day-of-week="1"
    color="green"
    width="100%"
    :locale="$i18n.locale"
    :weekday-format="$i18n.locale === 'en' ? formatData : null"
    :allowed-dates="allowData"
    event-color="green lighten-1"
    :events="functionEvents"
    :show-current="false"
    :picker-date.sync="pickerDate"
    @input="handleInput"
  />
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    },
    disableData: {
      type: Array,
      default: () => []
    },
    checkDateIsFullSale: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      pickerDate: ''
    };
  },
  watch: {
    pickerDate(val) {
      this.$emit('picker', val);
    }
  },
  methods: {
    handleInput(val) {
      this.$emit('input', val);
      this.$emit('change', val);
    },
    allowData(date) {
      if (this.disableData.includes(date)) {
        return false;
      }
      return true;
    },
    formatData(val) {
      const i = val.split('-')[2] - 16;
      return ['Sun', 'Mon', 'Tus', 'Wed', 'Thu', 'Fri', 'Sat'][(i + 1) % 7];
    },
    functionEvents(date) {
      if (this.disableData.includes(date)) {
        return ['#ff0000'];
      }
      if (!this.checkDateIsFullSale(date)) {
        return ['#f7a500'];
      }
      return true;
    }
  }
};
</script>

<style lang="scss">
.datepicker-detail {
  min-height: 210px;
  max-height: 460px;
  width: 100%;

  .v-picker__body {
    min-height: 210px;
    max-height: 460px;
    width: 100%;
  }

  .v-picker__title {
    display: none;
  }

  .v-date-picker-header {
    background: #edecec;
  }

  .v-btn {
    border-radius: 8px;
  }

  .theme--light.v-btn:focus::before {
    //display: none;
    opacity: 1;
    background: #caece0;
    border-radius: 8px;
    border-color: transparent;
  }

  .theme--light.v-btn:hover:before {
    //display: none;
    opacity: 1;
    background: #caece0;
    border-radius: 8px;
    border-color: transparent;
    transition: none;
  }

  .v-date-picker-header__value {
    .green--text {
      background: transparent;
      border-radius: 8px;
      border-color: transparent;
    }
  }

  .green--text {
    background: #caece0;
    border-radius: 8px;
    border-color: transparent;
  }

  .v-btn--disabled {
    background: #f1f1f1;
    border-radius: 8px;
    border-color: transparent;
  }

  .v-date-picker-table__events > div {
    width: 4px;
    height: 4px;
  }

  .datepicker-detail div {
    height: auto;
  }

  table {
    height: 100%;
  }
}
</style>
